<template>
	<div>
		<div class="search">
			<input
			 class="search-input" 
			 type="text" 
			 placeholder="输入城市名或拼音"
			 v-model="keyword"
			 >
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li
				 class="search-item border-bottom" 
				 v-for="item of list"
				 @click="handleCityClick(item.name)"
				 >
				 {{item.name}}
				 </li>
				<li class="search-item border-bottom" v-show="hasNoData">
					没有匹配到数据
				</li>
			</ul>
		</div>
	</div>
	
</template>

<script>
    import Bscroll from 'better-scroll'
    import {mapMutations} from 'vuex'
	export default {
         name:'CitySearch',
         props:{
         	cities:Object
         },
         data(){
         	return {
         		keyword:'',
         		list:[],
         		timer:null
         	}
         },
         computed:{
         	hasNoData(){
         		return !this.list.length
         	}
         },
         methods:{
            handleCityClick(city){
               // this.$store.commit('changeCity',city)
               this.changeCity(city)
               this.$router.push('/')

            },
            ...mapMutations(['changeCity'])
         },
         watch:{
         	keyword(){
         		if(this.timer){
         			clearTimeout(this.timer)
         		}
         		if(!this.keyword){
         			this.list=[]
         			return
         		}
         		this.timer=setTimeout(()=>{
                    const  result=[]
                    for(let i in this.cities){
                    	this.cities[i].forEach((value)=>{
                             if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
                             	 result.push(value)
                             }
                    	})
                    }
                    this.list=result
         		},100)
         	}
         },
         mounted(){
         	const element=this.$refs.search
         	this.scroll=new Bscroll(element)
         }
	}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
	.search
	   padding:0 .1rem
	   height:.72rem
	   background:$bgColor
	   .search-input
	      width: 100%
	      height: .62rem
	      line-height: .62rem
	      box-sizing: border-box
	      padding: 0 .1rem
	      text-align: center
	      border-radius: .06rem
	      color: #666
       
	.search-content
	  z-index: 1
	  overflow: hidden
	  position: absolute
	  top: 1.58rem
	  bottom:0
	  left: 0
	  right: 0
	  background:#eee
	  .search-item
	     padding-left: .2rem
	     line-height: .68rem
	     color: #666
	     background: #fff
         

</style>